<template>
  <div id="app">
    <router-view />
    <tabBar id="bottom">
      <div @click="change(home)" class="all">
        <div class="first">
          <img :src="this.$route.path == home ? sIndex : nIndex" class="img" />
        </div>
        <div
          class="secend"
          :class="this.$route.path == home ? Active : noActive"
        >
          主页
        </div>
      </div>

      <div @click="change(chatList)" class="all">
        <div class="first">
          <img
            :src="this.$route.path == chatList ? sChat : nChat"
            class="img"
          />
        </div>
        <div
          class="secend"
          :class="this.$route.path == chatList ? Active : noActive"
        >
          聊天
        </div>
      </div>
      <div @click="change(mine)" class="all">
        <div class="first">
          <img :src="this.$route.path == mine ? sMine : nMine" class="img" />
        </div>
        <div
          class="secend"
          :class="this.$route.path == mine ? Active : noActive"
        >
          我的
        </div>
      </div>
    </tabBar>
  </div>
</template>

<script>
import tabBar from "../../components/tabBar/index.vue";

export default {
  name: "",
  data() {
    return {
      sIndex: require("../../assets/index.png"),
      nIndex: require("../../assets/index2.png"),
      sPublish: require("../../assets/publish.png"),
      nPublish: require("../../assets/publish2.png"),
      sChat: require("../../assets/chat.png"),
      nChat: require("../../assets/chat2.png"),
      sMine: require("../../assets/mine.png"),
      nMine: require("../../assets/mine2.png"),
      home: "/home/dashBoardd",
      publish: "/home/publish",
      chatList: "/home/chatList",
      mine: "/home/mine",
      Active: "Active",
      noActive: "noActive",
    };
  },
  methods: {
    change(res) {
      this.$router.push(res);
    },
  },
  components: {
    tabBar,
  },
  mounted() {
    if (this.$route.query.code) {
      //loading
      const loading = this.$loading({
        lock: true,
        text: "加载数据ing......",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      console.log(this.$route.query.code);
      var that = this;
      let data = new FormData();
      data.append("client_id", "498e4c39d8befbc9");
      data.append("code", this.$route.query.code);
      data.append("client_secret", "9b152389471de6b08bebce209df8f72b");
      data.append("redirect_uri", "http://www.linjianyi.link/home/dashBoardd");
      //获取token
      this.axios
        .post("https://api.libv.com.cn:8050/user/yiBan/getToken", data)
        .then((res) => {
          // console.log(res);
          //保存token
          localStorage.setItem("token", res.data.access_token);
          //获取用户信息
          return this.axios
            .get("http://120.78.199.38:9000/getUserinfo", {
              params: {
                access_token: res.data.access_token,
              },
            })
            .then((res) => {
              //将用户信息保存在vuex中
              // console.log(res);
              that.$store.commit("edit", res.data.info);
              // console.log(this.$store.state.yb_schoolname);
              loading.close();
              //判断是否为第一次登录系统,如是就保存到数据库中
              return this.axios.get("http://120.78.199.38:9000/isExist", {
                params: {
                  yb_userid: res.data.info.yb_userid,
                },
              });
            })
            .then((res) => {
              // console.log(res);
              // console.log(that.$store.state.yb_schoolname);
              if (res.data == true) {
                this.axios.get("http://120.78.199.38:9000/addUser", {
                  params: {
                    yb_schoolname: that.$store.state.yb_schoolname,
                    yb_userhead: that.$store.state.yb_userhead,
                    yb_userid: that.$store.state.yb_userid,
                    yb_usernick: that.$store.state.yb_usernick,
                  },
                });
              }
            });
        });
    }
  },
};
</script>
<style scoped>
.bottom {
  display: flex;
}
#app {
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
}
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.all {
  height: 100%;
  width: 33%;
  text-align: center;
}
.first {
  height: 60%;
  width: 100%;
}
.secend {
  height: 35%;
  width: 100%;
  font-size: smaller;
}
.img {
  position: relative;
  top: 10%;
  height: 4vh;
  width: 4vh;
}
.Active {
  color: #1296db;
}
.noActive {
  color: #bfbfbf;
}
</style>
